<template>
    <view class="page">
        <view class="loading">
            <view></view>
            <view></view>
            <view></view>
            <view></view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading,
.loading > view {
    position: relative;
    box-sizing: border-box;
}

.loading {
    display: block;
    font-size: 0;
    color: #000;
}

.loading.la-dark {
    color: #333;
}

.loading > view {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}

.loading {
    width: 40px;
    height: 10px;
}

.loading > view {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.loading > view:first-child {
    transform: translateX(0%);
    animation: ball-newton-cradle-left 1s 0s ease-out infinite;
}

.loading > view:last-child {
    transform: translateX(0%);
    animation: ball-newton-cradle-right 1s 0s ease-out infinite;
}

.loading.la-sm {
    width: 20px;
    height: 4px;
}

.loading.la-sm > view {
    width: 4px;
    height: 4px;
}

.loading.la-2x {
    width: 80px;
    height: 20px;
}

.loading.la-2x > view {
    width: 20px;
    height: 20px;
}

.loading.la-3x {
    width: 120px;
    height: 30px;
}

.loading.la-3x > view {
    width: 30px;
    height: 30px;
}

@keyframes ball-newton-cradle-left {
    25% {
        transform: translateX(-100%);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translateX(0%);
    }
}

@keyframes ball-newton-cradle-right {
    50% {
        transform: translateX(0%);
    }

    75% {
        transform: translateX(100%);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateX(0%);
    }
}
</style>
